<template>
  <div class="login">
    <div class="login-form">
      <el-form ref="formRef" style="max-width: 600px" :model="LoginCode.ruleForm" label-width="auto" class="demo-ruleForm">
        <el-form-item label="" prop="username" :rules="[
        { required: true, message: '请输入用户名' },
      ]">
          <el-input v-model.number="LoginCode.ruleForm.username" placeholder="账号" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="" prop="password" :rules="[
        { required: true, message: '请输入密码' },
      ]">
          <el-input v-model.number="LoginCode.ruleForm.password" placeholder="密码" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="" :rules="[{ required: true, message: '请输入验证码' }]">
          <el-button @click="refreshCode" style="position: absolute;z-index: 99;right: 0;">{{dataCode}}</el-button>
          <el-input v-model.trim="LoginCode.ruleForm.code" placeholder="请输入验证码">
            <!-- <el-button v-slot="append" @click="refreshCode" style="font-size: 18px;">{{data.ruleForm.code}}</el-button> -->
            <!-- <el-button @click="refreshCode" style="font-size: 18px;">{{data.ruleForm.code}}</el-button> -->
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="submitBtn" type="primary" @click="submitForm(formRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import type { FormInstance } from "element-plus";
import { LoginData, CodeData } from "@/type/login";
import {
  login,
  getLoginCode,
  getUserRsaKey,
  getLoginPubKey,
} from "@/common/api";
import JsEncrypt from "jsencrypt";
const formRef = ref<FormInstance>();
const LoginCode = reactive(new LoginData());

const LoginPubKey = reactive(new CodeData());
const dataCode = ref("");
const datas = JSON.parse(JSON.stringify(LoginCode.ruleForm));
const publicKey = ref("");
const RSAencrypt = (pas, pubKey) => {
  JsEncrypt.prototype.setPublicKey(pubKey);
  return JsEncrypt.prototype.encrypt(pas);
};
const datasStr = RSAencrypt(JSON.stringify(datas), publicKey);
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      login(LoginCode.ruleForm).then((res) => {
        // console.log(res);
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
const refreshCode = () => {
  getLoginCode({}).then((res) => {
    // console.log(res.data, "777");
    dataCode.value = res.data;
  });
};
const UserRsaKey = () => {
  let asd = ref("");
  getLoginCode({}).then((res) => {
    // console.log(res.data, "777");
    asd.value = res.data;
    console.log(asd.value, "555");
  });
  // console.log(dataCode, "9999");
  // console.log(dataCode.value, "9999");
  // let dataCodeNum = dataCode.value;
  getLoginPubKey({ code: asd.value }).then((res) => {
    console.log(res);
  });
};
onMounted(() => {
  refreshCode();
  UserRsaKey();
});
</script>
<style lang="scss" scoped>
.login {
  background: #09c;
  height: 100vh;
  position: relative;
  .login-form {
    width: 300px;
    background: #ccc;
    padding: 20px;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .submitBtn {
    width: 100% !important;
  }
}
</style>

